// 用户个人资料-用户信息

var base = Vue.component('base', {
    data () {
        return {
            isEdit: false,
            userInfo: {
                name: '欧阳',
                gender: '男',
                dateBirth: '1994-11-02',
                avatar: '',
                education: '本科',
                IDCard: '423657857888979646',
                weight: '136',
                account: '湖南省永州市',
                identity: '党员',
                live: '深圳市南山区',
                birthplace: '湖南',
                emergencyContact: 'oyzx',
                nationality: '汉族',
                emergencyContactNumber: '18476047646',
                maritalStatus: '未婚',
                expectedSalary: 5000,
                accommodation: '宿舍',
                skill: '睡觉',
                position: '上班仔',
                hobby: '运动'
            }
        }
    },
    methods: {
        onEditFun () {
            this.isEdit = !this.isEdit
        },
        onSaveEdit () {
            // 保存设置
            console.log("保存设置")
            this.isEdit = false
        }
    },
    template: ` <div class="my-data" v-else>
                    <div class="title">基本信息</div>
                    <div class="content" v-if="isEdit">
                        <div class="contents">
                            <div class="second-title">姓名：</div>
                            <input type="text" v-model="userInfo.name" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">性别：</div>
                            <input type="text" v-model="userInfo.gender" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">出生日期：</div>
                            <input type="text" v-model="userInfo.dateBirth" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">形象照上传：</div>
                            <input type="file" />
                        </div>
                        <div class="contents">
                            <div class="second-title">最高学历：</div>
                            <input type="text" v-model="userInfo.education" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">身份证号码：</div>
                            <input type="text" v-model="userInfo.IDCard" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">体重：</div>
                            <input type="text" v-model="userInfo.weight" />
                        </div>
                        <div class="contents">
                            <div class="second-title">户口地址：</div>
                            <input type="text" v-model="userInfo.account" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">政治面貌：</div>
                            <input type="text" v-model="userInfo.identity" />
                        </div>
                        <div class="contents">
                            <div class="second-title">现住地址：</div>
                            <input type="text" v-model="userInfo.live" />
                        </div>
                        <div class="contents">
                            <div class="second-title">籍贯：</div>
                            <input type="text" v-model="userInfo.birthplace" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">紧急联系人：</div>
                            <input type="text" v-model="userInfo.emergencyContact"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">民族：</div>
                            <input type="text" v-model="userInfo.nationality" disabled="disabled"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">紧急电话：</div>
                            <input type="text" v-model="userInfo.emergencyContactNumber"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">婚姻状况：</div>
                            <input type="text" v-model="userInfo.maritalStatus" />
                        </div>
                        <div class="contents">
                            <div class="second-title">期望月薪：</div>
                            <input type="text" v-model="userInfo.expectedSalary" />
                        </div>
                        <div class="contents">
                            <div class="second-title">住宿情况：</div>
                            <input type="text" v-model="userInfo.accommodation" />
                        </div>
                        <div class="contents">
                            <div class="second-title">专业技能：</div>
                            <input type="text" v-model="userInfo.skill"/>
                        </div>
                        <div class="contents">
                            <div class="second-title">职位：</div>
                            <input type="text" v-model="userInfo.position" value=""/>
                        </div>
                        <div class="contents">
                            <div class="second-title">特长爱好：</div>
                            <input type="text" v-model="userInfo.hobby"/>
                        </div>
                    </div>
                    <div class="btns" v-if="isEdit">
                        <button class="btn btn-save" @click="onEditFun">返回</button>
                        <button class="btn btn-primary" @click="onSaveEdit">保存设置</button>
                    </div>
                
                    <div class="content"  v-if="!isEdit">
                        <div class="contents">
                            <div class="second-title">姓名：</div>
                            <div>{{userInfo.name}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">性别：</div>
                            <div>{{userInfo.gender}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">出生日期：</div>
                            <div>{{userInfo.dateBirth}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">形象照上传：</div>
                            <img :src="userInfo.avatar" />
                        </div>
                        <div class="contents">
                            <div class="second-title">最高学历：</div>
                            <div>{{userInfo.education}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">身份证号码：</div>
                            <div>{{userInfo.IDCard}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">体重：</div>
                            <div>{{userInfo.weight}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">户口地址：</div>
                            <div>{{userInfo.account}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">政治面貌：</div>
                            <div>{{userInfo.identity}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">现住地址：</div>
                            <div>{{userInfo.live}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">籍贯：</div>
                            <div>{{userInfo.birthplace}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">紧急联系人：</div>
                            <div>{{userInfo.emergencyContact}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">民族：</div>
                            <div>{{userInfo.nationality}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">紧急电话：</div>
                            <div>{{userInfo.emergencyContactNumber}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">婚姻状况：</div>
                            <div>{{userInfo.maritalStatus}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">期望月薪：</div>
                            <div>{{userInfo.expectedSalary}}</div>
                        </div>
                        <div class="contents">
                            <div class="second-title">住宿情况：</div>
                            <div>{{userInfo.accommodation}}</div> 
                        </div>
                        <div class="contents">
                            <div class="second-title">专业技能：</div>
                            <div>{{userInfo.skill}}</div> 
                        </div>
                        <div class="contents">
                            <div class="second-title">职位：</div>
                            <div>{{userInfo.position}}</div> 
                        </div>
                        <div class="contents">
                            <div class="second-title">特长爱好：</div>
                            <div>{{userInfo.hobby}}</div> 
                        </div>
                    </div>
                    <div class="btns"  v-if="!isEdit">
                        <button class="btn btn-primary" @click="onEditFun">编辑</button>
                    </div>
                </div>`
})